<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>Panels</title>
  <script src="../../polymer/polymer.js"></script>
  <link rel="import" href="../elements/g-tabpanels.html">
	<style>
		html, body {
			height: 100%;
			margin: 0;
			background: whitesmoke;
		}

		body {
      display: -webkit-box;
			display: -webkit-flex;
      display: flex;
      webkit-box-orient: vertical;
			-webkit-flex-flow: column;
      flex-direction: column;
		}

		.controls {
			padding: 10px;
		}

		g-tabpanels {
      -webkit-box-flex: 1;
			-webkit-flex: 1;
      flex: 1;
			outline: none;
			border: 1px solid #ccc;
			position: relative;
			overflow: hidden;
		}

		section {
      font-size: 30px;
			padding: 10px;
      box-sizing: border-box;
    }

    g-tabpanels[transition="flow"] > * {
      width: 80%;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    g-tabpanels[transition="flow"] > *:nth-of-type(1) {
      width: 200px;
    }

    g-tabpanels[transition="flow"] > *:nth-of-type(2) {
      width: 240px;
    }

    g-tabpanels[transition="flow"] > *:nth-of-type(3) {
      width: 280px;
    }

    g-tabpanels[transition="flow"] > *:nth-of-type(4) {
      width: 100%;
    }

    g-tabpanels[transition="flow"] > *:nth-of-type(5) {
      width: 280px;
    }

	</style>
</head>
<body>
  <div class="controls">
		<button onclick="previous();">&laquo;</button>
		<button onclick="next();">&raquo;</button>
    <button onclick="addPanel();">+</button>
		<select onchange="changeTransition(event)">
			<option  selected>fade</option>
      <option value="none">none</option>
      <option value="keyframe">hslide</option>
			<option value="keyframe">vslide</option>
			<option value="keyframe">hslideover</option>
			<option value="keyframe">vslideover</option>
			<option value="keyframe">explode</option>
      <option value="keyframe">scale-slide</option>
      <option value="keyframe">fly-up-right</option>
      <option value="flow">flow</option>
		</select>
    <label>enable transitions: <input type="checkbox" checked onchange="transitionableChange(event)"></label>
	</div>
  <g-tabpanels index="2" transition="keyframe" class="g-panels-fade">
		<section name="foo" style="background: lightsteelblue;">Panel 1</section>
		<section name="zonk" style="background: tomato;">Panel 2</section>
		<section name="bar" style="background: beige;">Panel 3
      <div>foo</div>
      <div>bar</div>
      <div>baz</div>
    </section>
		<section name="zing" style="background: silver;">Panel 4</section>
		<section name="baz" style="background: whitesmoke;" class="right">Panel 5</section>
	</g-tabpanels>
<script>
	document.addEventListener("WebComponentsReady", function() {
    panels = document.querySelector("g-tabpanels");
		next = function() {
			panels.next();
		}
		previous = function() {
			panels.previous();
		}
    
    transitionableChange = function(e) {
      panels.enableTransitions(e.target.checked);
    }

		changeTransition = function(e) {
      panels.transition = e.target.value;
      var selectedOption = e.target.options[e.target.selectedIndex];
      var className = selectedOption ? selectedOption.textContent : '';
      panels.className = panels.className.replace(/g-panels-[^\s]*/, '') +
        ' g-panels-' + className;
      panels.focus();
		}
    
    addPanel = function() {
      var p = document.createElement('section');
      var panelName = 'Panel ' + ++panels.count;

      p.style.background = 'hsla(' + Math.round(Math.random() * 360) + ', 60%, 30%, 1)';
      p.textContent = panelName;
      p.setAttribute('name', panelName);
      panels.appendChild(p);
      panels.panelAdded(p);
      panels.index = panels.count;
    }

    panels.focus();
	});
</script>

</body>
</html>
